<template>
    <view>
        <view class="levellist">
            <view class="levelmain">
                <block v-for="(item, index) in lookrolelist" :key="index">
                    <view :class="'levelitem  ' + (curNav == item.id ? 'selected' : '')" @tap="selectNav" :data-index="index" :data-id="item.id">
                        <view>{{ item.title }}</view>
                        <view>￥{{ item.money }}</view>
                        <view>查看{{ item.looknum }}次</view>
                        <view>永久有效</view>
                    </view>
                </block>
            </view>
        </view>

        <!-- 去充值模块 -->
        <view class="goblance">
            <view class="txt_t">
                <button @tap="pay" data-money="500">购买简历包</button>
            </view>
        </view>
        <!-- 充值余额成功弹出层 -->

        <view class="scorelist">
            <view class="title">
                <view>编号</view>
                <view>操作(充/消)</view>
                <view>剩余次数</view>
                <view>时间</view>
            </view>
            <view class="list" v-for="(item, index) in lookrolerecordlist" :key="index">
                <view>{{ item.id }}</view>

                <view>{{ item.type == 0 ? '充' : '消费' }}{{ item.looknum }} {{ item.mark }}</view>

                <view>{{ item.totallooknum }}</view>

                <view>{{ item.create_time }}</view>
            </view>
        </view>
    </view>
</template>

<script>
//recharge.js
import { Lookrole } from '../../model/lookrole-model.js';
var lookrole = new Lookrole();
import { Order } from '../../model/order-model.js';
var order = new Order();
import { Pay } from '../../model/pay-model.js';
var pay = new Pay();
var color;
var sucmoney;
var money = 0;
var b = 0;
var yajinid = 0;
export default {
    data() {
        return {
            id: 0,
            mymoney: 0,
            disabled: false,
            curNav: 1,
            curIndex: 0,
            cart: [],
            cartTotal: 0,
            lockhidden: true,
            yajinhidden: true,
            sucmoney: 424,
            color: 'limegreen',
            nocancel: false,
            tajinmodaltitle: '押金充值',
            yajinmodaltxt: '去充值',
            yajinmoney: 0,
            yajintxt: '您是否确定充值押金299元？押金充值后可以在摩拜单车App全额退款',
            lookrolelist: '',
            lookrolerecordlist: ''
        };
    }, //页面加载模块
    onLoad: function () {
        uni.setNavigationBarTitle({
            title: '购买简历包'
        });
        var that = this;
        var params = {};
        lookrole.GetLookroleList((data) => {
            that.setData({
                lookrolelist: data.lookrolelist,
                lookrolerecordlist: data.lookrolerecordlist
            });
        }, params);
    },
    methods: {
        //充值金额分类渲染模块
        selectNav(event) {
            var that = this;
            let id = event.currentTarget.dataset.id;

            // console.log(id);
            that.id = id;
            var index = parseInt(event.currentTarget.dataset.index);
            var b = parseInt(event.currentTarget.dataset.money);
            self = this;
            this.setData({
                curNav: id,
                curIndex: index
            });
        },

        buttonEventHandle: function (event) {},

        pay: function (e) {
            var that = this;
            var pid = that.id;
            if (pid > 0) {
                var params = {
                    pid: pid,
                    type: 'lookrole'
                };
                order.LookRoleorder((data) => {
                    pay.execPay(data.order_id, (res) => {});
                }, params);

                /*
          var userinfo = wx.getStorageSync('userInfo');
          var ordertype = 'paycard';
          wx.showModal({
            title: '确认支付',
            content: '确认支付金额？',
            success: function (res) {
              if (res.confirm) {
                app.util.request({
                  'url': 'entry/wxapp/paycard',
                  data: { ordertype: ordertype, pid: pid, sessionid: userinfo.sessionid, uid: userinfo.memberInfo.uid },
                  success: function (res) {
                    console.log(res);
                    if (res.data && res.data.data) {
                      wx.requestPayment({
                        'timeStamp': res.data.data.timeStamp,
                        'nonceStr': res.data.data.nonceStr,
                        'package': res.data.data.package,
                        'signType': 'MD5',
                        'paySign': res.data.data.paySign,
                        'success': function (res) {
                          //支付成功后，系统将会调用payResult() 方法，此处不做支付成功验证，只负责提示用户
                          console.log(res);
                           that.setData({
                            ispay: 1
                          })
                    
                           setTimeout(function () {
                             //go to next
                            wx.navigateBack();
                           }, 1000);
                         },
                        'fail': function (res) {
                          //支付失败后，
                        }
                      })
                    }
                   },
                  fail: function (res) {
                    console.log(res);
                  }
                 })
                 }
            }
          
        });
        */
            } else {
                uni.showModal({
                    title: '提示',
                    content: '请选择充值选项',
                    showCancel: false
                });
                return;
            }
        },

        //去充值功能模块
        goblance: function (event) {
            money += b;
            this.setData({
                lockhidden: false,
                mymoney: money,
                sucmoney: b
            });
        },

        confirm: function () {
            this.setData({
                lockhidden: true
            });
        },

        //押金功能模块
        yajin: function (event) {
            this.setData({
                yajinhidden: false
            });
        },

        yajincancel: function (event) {
            this.setData({
                yajinhidden: true
            });
        },

        yajinconfirm: function (event) {
            if (yajinid == 0) {
                yajinid = 1;
                this.setData({
                    nocancel: true,
                    yajintxt: '您已成功充值押金299元',
                    tajinmodaltitle: '充值成功',
                    yajinmodaltxt: '完成'
                });
            } else {
                yajinid = 0;
                this.setData({
                    nocancel: false,
                    yajinhidden: true,
                    yajinmoney: 299
                });
            }
            this.setData({
                nocancel: true
            });
        }
    }
};
</script>
<style>
page {
    background: #fff;
}

.levellist {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 10rpx;
    background: #fff;
}
.levellist .levelmain {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.levellist .levelitem {
    width: 198rpx;
    height: 220rpx;
    border-radius: 10rpx;
    border: 1rpx solid yellow;
    display: flex;
    flex-direction: column;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
}
.levellist .levelitem view:nth-child(1) {
    width: 200rpx;
    height: 80rpx;
    background: #fbd74d;
    color: #734500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(2) {
    font-weight: 600;
    font-size: 1.2rem;
    color: #734500;
    width: 198rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(3) {
    font-size: 0.7rem;
    color: #734500;
    width: 198rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(4) {
    font-size: 0.7rem;
    color: red;
    width: 198rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selected {
    background: #fdf1db;
}

/*充值金额分类*/
.balance-demo {
    padding: 40rpx 0 30rpx 0;

    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.userlevel {
    width: 300rpx;
    height: 50rpx;
    background: yellow;
    font-size: 0.8rem;
}

.balance-demo button {
    display: inline-block;
    width: 300rpx;
    height: 320rpx;
    margin: 10rpx 35rpx;
    background-color: transparent;
    border: 1rpx solid yellow;
}
.balance-demo button[data-id='5'] {
    padding-top: 30rpx;
}
.balance-demo button.selected {
    background-color: yellow;
    color: #fff;
}
.balance-demo button text {
    display: block;
    line-height: 60rpx;
}
.balance-demo button .botton {
    color: #808080;
}
.balance-demo button text.selected {
    color: #fff;
}
.other-button-hover {
    background-color: yellow;
}
/*<!--去充值模块-->*/
.goblance {
    width: 100%;
    box-sizing: border-box;
    margin-top: 80rpx;
    padding: 0 30rpx 0 30rpx;
    background-color: #fff;
    text-align: center;
}

.goblance .txt_t {
    color: #808080;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.goblance navigator {
    display: inline-block;
    color: #0033ff;
}
.goblance button[disabled='false'] {
    color: #fff;
}
.goblance button {
    color: #734500;
    margin: 20rpx 15rpx;
    background-color: #fbd74d;
    font-size: 0.8rem;
    width: 500rpx;
    height: 100rpx;
    line-height: 100rpx;
    border: 0rpx solid #fbd74d;
}

.scorelist {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scorelist .title {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    border-bottom: 1rpx dotted #808080;
    padding-top: 25rpx;
    padding-bottom: 25rpx;
}
.scorelist .title view {
    width: 20%;
    text-align: center;
    font-weight: 600;
}

.scorelist .list {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx dotted #808080;
}
.scorelist .list view {
    width: 20%;
    text-align: center;
}
</style>
